import React, { Component, createRef } from 'react'

export default class FormTest extends Component {
    /**
     * 受控组件：表单元素的值，受到状态数据的控制
     * 
     * 1. 状态数据渲染到 表单
     * 2. 获取用户最新输入的数据
     * 
     * 如何是表单受控：
     *  type: text password select 绑定value值就会受控
     *  type: radio checkbox       绑定 checked 值就会受控
     */
    submitHandler(e){
        e.preventDefault()
        console.log('username:', this.state.username)
    }
    state = {
        username:'zyx',
        password:'123123',
        sex:'1',
        city:'3',
        hobby: ['1','3','4']
    }
    // changeUsername(e){
    //     // 获取用户输入数据，改变状态数据，就可以显示用户输入最新的内容了
    //     // console.log(e.target.value)
    //     // console.log(e.target.name)
    //     this.setState({
    //         [e.target.name]:e.target.value
    //     })
    // }
    // changePassword(e){
    //     // console.log(e.target.name)
    //     this.setState({
    //         [e.target.name]: e.target.value
    //     })
    // }
    
    changeHandler(e){
        console.log(e.target.name, e.target.value, e.target.type)
        if(e.target.type === 'checkbox'){
            console.log('多选')
            // 1. 复制一下原来的数组
            let copyArr = [...this.state[e.target.name]]
            // 获取当前点击项在数组中的索引位置
            let index = copyArr.findIndex(item=>item === e.target.value)
            if(index === -1){
                // 要添加
                copyArr.push(e.target.value)
                this.setState({
                    [e.target.name] : copyArr
                })
            }else{
                // 从数组中删除index位置的元素
                copyArr.splice(index, 1)
                this.setState({
                    [e.target.name]: copyArr
                })
            }
        }else{
            this.setState({
                [e.target.name]: e.target.value
            })
        }
    }
    render() {
        let {username, password, sex, city,hobby} = this.state;
        return (
            <>
                <form action="http://baidu.com" onSubmit={this.submitHandler.bind(this)}>

                    <p>用户名：<input type="text" name="username" id="" value={username} onChange={this.changeHandler.bind(this)}/></p>
                    <p>密码: <input type="password" name="password" id="" value={password} onChange={this.changeHandler.bind(this)}/></p>
                    <p>性别： 
                        <input type="radio" name="sex" value="1" checked={sex==='1'} onChange={this.changeHandler.bind(this)}/> 男
                        <input type="radio" name="sex" value="0" checked={sex==='0'} onChange={this.changeHandler.bind(this)}/> 女
                    </p>
                    <p>
                        城市：
                        <select name="city" value={city} onChange={this.changeHandler.bind(this)}>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">深圳</option>
                        </select>
                    </p>
                    <p>
                        爱好：
                        <input type="checkbox" name="hobby" value="1" checked={hobby.includes('1')} onChange={this.changeHandler.bind(this)}/> 打台球
                        <input type="checkbox" name="hobby" value="2" checked={hobby.includes('2')} onChange={this.changeHandler.bind(this)}/> 弹玻璃球
                        <input type="checkbox" name="hobby" value="3" checked={hobby.includes('3')} onChange={this.changeHandler.bind(this)}/> 滑雪
                        <input type="checkbox" name="hobby" value="4" checked={hobby.includes('4')} onChange={this.changeHandler.bind(this)}/> 打出溜滑
                    </p>
                    <button>保存</button>
                </form>
            </>
        )
    }
}
